<template>
  <div class="wft-projects">
    <Vue3DraggableResizable
      :initW="110"
      :initH="120"
      v-model:x="x"
      v-model:y="y"
      v-model:w="w"
      v-model:h="h"
      v-model:active="active"
      :draggable="true"
      :resizable="true"
      @activated="print('activated')"
      @deactivated="print('deactivated')"
      @drag-start="print('drag-start')"
      @resize-start="print('resize-start')"
      @dragging="print('dragging')"
      @resizing="print('resizing')"
      @drag-end="print('drag-end')"
      @resize-end="print('resize-end')"
      classNameActive="draggableresizable-active"
    >
      <span style="color: #FFFFFF;font-family: ysbth;">This is a test example</span>
    </Vue3DraggableResizable>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Vue3DraggableResizable from '@/lib/vue3-draggable-resizable'
import '@/lib/vue3-draggable-resizable/components/Vue3DraggableResizable.css'

let x = ref(100)
let y = ref(100)
let h = ref(100)
let w = ref(100)
let active = ref(false)

const print = (val:string) => {
  console.log(val)
  console.log(x.value, 'x-->>>')
  console.log(y.value, 'y-->>>')
  console.log(h.value, 'h-->>>')
  console.log(w.value, 'w-->>>')
}

</script>
<style scoped>
.wft-projects {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>